<template>
  <div class="chinaPerson">中国人口分布图</div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
//引入axios
import axios from "axios";
export default {
  data() {
    return {};
  },
  methods: {
    //随机数函数
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    async showChinaPerson() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".chinaPerson"));
      //显示加载
      myChart.showLoading();
      //获取数据  异步等待
      let { data: geoJson } = await axios.get(
        "http://localhost:9000/json/china.json"
      );
      console.log(geoJson);
      // 隐藏加载
      myChart.hideLoading();

      echarts.registerMap("china", geoJson);
      //创建配置项
      let option = {
        title: {
          text: "中国人口分布图 （2011）",
          subtext: "人口数量分布",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (人 / 平方千米)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          //人口最小值min  人口最大值max
          min: 0,
          max: 1000,
          text: ["人口密集", "人口稀少"],
          realtime: false,
          calculable: true,
          // 范围颜色
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        // 系列里面map值必须是自己定义的
        series: [
          {
            name: "中国各省份人口分布1990",
            type: "map",
            map: "china",
            label: {
              show: true,
            },
            data: [
              { name: "北京市", value: this.randomData() },
              { name: "天津市", value: this.randomData() },
              { name: "上海市", value: this.randomData() },
              { name: "重庆市", value: this.randomData() },
              { name: "河北省", value: this.randomData() },
              { name: "河南省", value: this.randomData() },
              { name: "云南省", value: this.randomData() },
              { name: "辽宁省", value: this.randomData() },
              { name: "黑龙江省", value: this.randomData() },
              { name: "湖南省", value: this.randomData() },
              { name: "安徽省", value: this.randomData() },
              { name: "山东省", value: this.randomData() },
              { name: "新疆省", value: this.randomData() },
              { name: "江苏省", value: this.randomData() },
              { name: "浙江省", value: this.randomData() },
              { name: "江西省", value: this.randomData() },
              { name: "湖北省", value: this.randomData() },
              { name: "广西省", value: this.randomData() },
              { name: "甘肃省", value: this.randomData() },
              { name: "山西省", value: this.randomData() },
              { name: "内蒙古省", value: this.randomData() },
              { name: "陕西省", value: this.randomData() },
              { name: "吉林省", value: this.randomData() },
              { name: "福建省", value: this.randomData() },
              { name: "贵州省", value: this.randomData() },
              { name: "广东省", value: this.randomData() },
              { name: "青海省", value: this.randomData() },
              { name: "西藏省", value: this.randomData() },
              { name: "四川省", value: this.randomData() },
              { name: "宁夏省", value: this.randomData() },
              { name: "海南省", value: this.randomData() },
              { name: "台湾省", value: this.randomData() },
              { name: "香港特别行政区", value: this.randomData() },
              { name: "澳门特别行政区", value: this.randomData() },
              { name: "新疆维吾尔自治区", value: this.randomData() },
              { name: "内蒙古自治区", value: this.randomData() },
              { name: "西藏自治区", value: this.randomData() },
              { name: "宁夏回族自治区", value: this.randomData() },
              { name: "广西壮族自治区", value: this.randomData() },
            ],
            // 自定义名称映射
            nameMap: {},
          },
        ],
      };

      //设置配置项
      myChart.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.showChinaPerson();
  },
};
</script>

<style lang="scss" scoped>
.chinaPerson {
  padding: 20px;
  background: lightgoldenrodyellow;
  width: 80%;
  height: 1000px;
}
</style>